<template>
    <Row>
        <Button type="info" @click="addNodeGroup()" style="margin-bottom: 10px;margin-left:120px;" v-if="is_modifying">添加模块组</Button>
        <Collapse v-model="value1" accordion style="width:70%;margin-left:120px;">
            <Panel v-for="(parent, parent_index) in tree" :name="''+parent_index">
                {{parent.title}}
                <div style="float:right;line-height:38px;margin-right:5px;">
                    <Button type="error" @click="deleteNodeGroup(parent_index)" size="default" v-if="is_modifying">删除</Button>
                </div>        
                <div slot="content">
                    <p style="padding-bottom:1em;">
                        <span>本级模块</span><Input v-model="parent.title" class="my-input" :disabled="disabled"></Input>
                        <span>图标</span><Input v-model="parent.icon" class="my-input" :disabled="disabled"></Input>
                        <Button type="info" @click="addNode(parent)" v-if="is_modifying">添加子模块</Button>
                    </p>
                    <Card style="margin-left:30px;">
                        <p v-for="(child, index) in parent.children" style="padding-bottom:1em;">
                            <span>子级模块</span>
                            <Dropdown trigger="click" placement="bottom-end" class="my-input">
                                <Button type="ghost" style="width:100%;">
                                    <span>{{route_list[child.name] ? route_list[child.name].title : "" }}</span>
                                    <Icon type="arrow-down-b" style="float:right;"></Icon>
                                </Button>
                                <DropdownMenu slot="list">
                                    <div v-for="(item, key) in list" @click="handleChange(child, key)">
                                        <DropdownItem :name="key">{{ item.title }}</DropdownItem>
                                    </div>
                                </DropdownMenu>
                            </Dropdown>
                            <span>标题</span><Input v-model="child.title" class="my-input" :disabled="disabled"></Input>
                            <span>图标</span><Input v-model="child.icon" class="my-input" :disabled="disabled"></Input>
                            <Button type="error" @click="deleteNode(parent, index)" v-if="is_modifying">删除</Button>
                        </p>
                    </Card>
                </div>
            </Panel>
        </Collapse>
        <div style="text-align:center;padding-top:15px;">
            <Button type="warning" @click="modifyTree()" v-if="!is_modifying && checkPermission('110613')">修改</Button>
            <Button type="primary" @click="saveTree()" v-if="is_modifying">保存</Button>
            <Button type="default" @click="cancelTree()" v-if="is_modifying">取消</Button>
        </div>
    </Row>
</template>

<script>
import parent from '../Parent';
import { route_list, template_default } from "../../router/router";
export default {
    extends:parent,
    data() {
        var str_tree = JSON.stringify(template_default);
        return {
            value1: "",
            route_list: route_list,
            list: route_list,
            tree: JSON.parse(str_tree),
            old_tree: JSON.parse(str_tree),
            is_modifying: false
        }
    },
    computed: {
        disabled() {
            return !this.is_modifying;
        }
    },
    methods: {
        modifyTree() {
            this.is_modifying = true;
        },
        saveTree() {
            var str_tree = JSON.stringify(this.tree);
            this.api.post("free_value/set", { keyvalues: {"page": str_tree} }, res => {
                this.$CustomMessage.success("保存成功！");
                this.old_tree = JSON.parse(str_tree);
                this.is_modifying = false;
            });
        },
        cancelTree() {
            this.tree= this.old_tree;
            this.is_modifying = false;
        },
        addNodeGroup() {
            this.tree.push({
                icon: "ios-folder",
                title: "未命名模块组",
                children: []
            });
        },
        deleteNodeGroup(index) {
            if(confirm('确定要删除该模块组吗？')){
                this.tree.splice(index, 1);
                this.refreshList();
            }
        },
        addNode(parent) {
            var name = "";
            for(var key in this.list) {
                name = key;
                break;
            }
            if(name == "") {
                this.$CustomMessage.error("页面已设置完毕，不能添加新的页面！！！");
                return;
            }
            var item = {
                name: name,
                icon: this.list[name].icon,
                title: this.list[name].title
            };
            parent.children.push(item);
            this.refreshList();
        },
        deleteNode(parent, index) {
            if(confirm("确定要删除该子级模块吗？")){
                parent.children.splice(index, 1);
                this.refreshList();
            } 
        },
        handleChange(item, name) {
            item.name = name;
            item.icon = this.list[name].icon;
            item.title = this.list[name].title;
            this.refreshList();
        },
        refreshList() {
            var temp = {};
            for(var key in route_list) {
                route_list[key].used = false;
            }
            this.tree.forEach(parent => {
                parent.children.forEach(child => {
                    route_list[child.name].used = true;
                });
            });
            for(var key in route_list) {
                if(route_list[key].used == false) temp[key] = route_list[key];
            }
            this.list = temp;
        }
    },
    created() {
        this.refreshList();
        this.api.post("free_value/get", { key: "page" }, res => {
            if(res.data && res.data.value) {
                this.tree = JSON.parse(res.data.value);
                this.old_tree = JSON.parse(res.data.value);
                this.refreshList();
            }
        });
    }
}
</script>

<style scoped>
    .my-input {
        width: 20%;
        margin-left: 1%;
        margin-right: 2%;
    }
</style>
